<template>
  <div class="content">
    <!-- 用户信息 -->
    <div class="userInfo">
      <div class="userInfo-avatar">
        <open-data type="userAvatarUrl"></open-data>
      </div>
      <div class="userInfo-name">
        <open-data type="userNickName"> </open-data>
      </div>
    </div>
    <!-- 绑定手机号 -->
    <div class="bangding-phone">
      <span class="shou-tip">绑定手机号后查看订单和领取优惠卷,</span>
      <span class="gotobinding" @click="toBindingPhone">去绑定</span>
    </div>
    <!-- 列表 -->
    <div class="list-cont">
      <!-- 订单状态 -->
      <div class="total-order">
        <div class="order-tit">
          <span style="font-weight: bold">我的订单</span>
          <div class="checkmore" @click="toOrderListPage" data-sts="0">
            <span>查看全部 </span>
            <span class="arrowhead"></span>
          </div>
        </div>

        <div class="procedure">
          <div class="items" @click="toOrderListPage" data-sts="1">
            <image src="../../static/images/icon/toPay.png"></image>
            <span>待支付</span>
            <div v-show="orderCount.unPay > 0 ? true : false">
              <span class="num-badge" v-show="flag">{{
                orderCount.unPay
              }}</span>
            </div>
          </div>
          <div class="items" @click="toOrderListPage" data-sts="2">
            <image src="../../static/images/icon/toDelivery.png"></image>
            <span>待发货</span>
            <div v-show="orderCount.payed > 0 ? true : false">
              <span class="num-badge" v-show="flag">{{
                orderCount.payed
              }}</span>
            </div>
          </div>
          <div class="items" @click="toOrderListPage" data-sts="3">
            <image src="../../static/images/icon/toTake.png"></image>
            <span>待收货</span>
            <div v-show="orderCount.consignment > 0 ? true : false">
              <span class="num-badge" v-show="flag">{{
                orderCount.consignment
              }}</span>
            </div>
          </div>
          <div class="items" @click="toOrderListPage" data-sts="4">
            <image src="../../static/images/icon/toComment.png"></image>
            <span>已完成</span>
          </div>
        </div>
      </div>
      <!--end 订单状态 -->

      <div class="prod-col">
        <div class="col-item" @click="subClassify">
          <div class="num">{{ classifyList.length }}</div>
          <div class="tit">我的收藏</div>
        </div>
        <div class="col-item">
          <div class="num">5</div>
          <div class="tit">我的消息</div>
        </div>
        <div class="col-item">
          <div class="num">3</div>
          <div class="tit">我的足迹</div>
        </div>
        <div class="col-item" @click="goScore">
          <div class="num">0</div>
          <div class="tit">我的积分</div>
        </div>
      </div>

      <div class="my-menu">
        <div class="memu-item" @click="toAddressList">
          <div class="i-name">
            <image src="../../static/images/icon/myAddr.png"></image>
            <span class="menu-address">收货地址</span>
          </div>
          <div class="arrowhead"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      classifyList: (state) => state.user.classifyList,
      orderCount: (state) => state.user.orderCount,
    }),
  },
  onLoad() {},
  methods: {
    ...mapActions({
      getActionsClassify: "user/getActionsClassify",
      getOrderCount: "user/getOrderCount",
      getActionsOrder: "user/getActionsOrder",
    }),
    // 跳转到2048页面
    goScore() {
      wx.navigateTo({
        url: "/pages/2048/index",
      });
    },
    //跳到地址列表页
    toAddressList() {
      wx.navigateTo({
        url: `../delivery-address/index`,
      });
    },
    // 跳转到我的收藏页面
    subClassify() {
      wx.navigateTo({
        url: "/pages/classify/index",
      });
    },
    //跳转到我的订单页面
    toOrderListPage(e) {
      var sts = e.currentTarget.dataset.sts;
      wx.navigateTo({
        url: "/pages/orderList/index?sts=" + sts,
      });
      this.getActionsOrder(sts);
    },
    toBindingPhone() {
      wx.navigateTo({
        url: "/pages/bangdingphone/index",
      });
    },
  },
  mounted() {
    //收藏数据
    this.getActionsClassify();
    //获取订单数
    this.getOrderCount();
  },
};
</script>

<style>
page {
  background-color: #f7f7f7;
  padding-bottom: 60rpx;
}
.content {
  height: 100%;
  box-sizing: border-box;
  color: #333;
  font-family: helvetica, "Heiti SC", PingFangSC-Light;
}
.userInfo {
  position: relative;
  width: 100%;
  background: #fff;
  text-align: center;
  padding: 30rpx 0;
}
.userInfo .userInfo-avatar {
  overflow: hidden;
  display: block;
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  margin: auto;
}
.userInfo .userInfo-name {
  font-size: 30rpx;
  font-weight: bold;
  margin-top: 20rpx;
}
.bangding-phone {
  position: relative;
  background: #fff;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 30rpx;
  border-top: 2rpx solid #f7f7f7;
  border-bottom: 2rpx solid #f7f7f7;
}
.bangding-phone .shou-tip {
  font-size: 26rpx;
}
.gotobinding {
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #e24b4b;
  font-weight: bold;
}
/* 订单状态 */

.list-cont {
  width: 100%;
  background: #f7f7f7;
  margin-top: 20rpx;
}

.list-cont .total-order {
  /* width: 100%; */
  /* margin-bottom: 30rpx; */
  background: #fff;
}

.list-cont .total-order .order-tit {
  display: flex;
  justify-content: space-between;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  border-bottom: 1px solid #f7f7f7;
  padding: 0 30rpx;
}

.list-cont .total-order .order-tit .checkmore {
  font-size: 22rpx;
  color: #80848f;
  display: flex;
  align-items: center;
}

.list-cont .total-order .procedure {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 25rpx;
  height: 160rpx;
}

.list-cont .total-order .procedure .items {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list-cont .total-order .procedure .items image {
  width: 70rpx;
  height: 70rpx;
  margin-bottom: 20rpx;
}

.list-cont .total-order .procedure .items .num-badge {
  position: absolute;
  top: -15rpx;
  right: -12rpx;
  color: #eb2444;
  border: 3rpx solid #eb2444;
  border-radius: 50rpx;
  background: #fff;
  min-width: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  padding: 2rpx;
  display: block;
}

/* end 订单状态 */

/* 列表项 */

.list-cont .my-menu {
  /* width: 100%; */
  background-color: #fff;
  margin-top: 20rpx;
}

.list-cont .my-menu .memu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  border-bottom: 2rpx solid #f7f7f7;
  padding: 0 30rpx;
}

.list-cont .my-menu .memu-item:nth-child(1) {
  border-top: 2rpx solid #f7f7f7;
}

.list-cont .my-menu .memu-item:last-child {
  border-bottom: none;
}

.list-cont .my-menu .memu-item span {
  font-size: 28rpx;
}
.list-cont .my-menu .memu-item image {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}
.list-cont .my-menu .memu-item .i-name {
  display: flex;
  align-items: center;
}

/* end 列表项 */

/* 箭头 */

.arrowhead {
  width: 15rpx;
  height: 15rpx;
  border-top: 2rpx solid #999;
  border-right: 2rpx solid #999;
  transform: rotate(45deg);
  margin-left: 10rpx;
}

/* 商品收藏消息等 */
.prod-col {
  margin-top: 20rpx;
  background: #fff;
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0 10rpx 0;
  font-size: 16px;
}
.col-item {
  text-align: center;
}
.col-item .num {
  font-size: 40px;
  font-weight: 700;
  color: #3a86b9;
  padding: 5px 0;
  padding-bottom: 10px;
}
.col-item .tit {
  line-height: 34px;
  font-size: 30px;
  padding-bottom: 10px;
}
.menu-address {
  font-size: 28rpx;
}
</style>
